<template>
	<view class="container">
		<fu-navbar title="报修" bgColor="#0f68f0" color="#fff"></fu-navbar>
		<view class="flex align-center justify-between title">
			<view class="flex align-center">
				<image src="../../../static/images/icon24.png" mode="aspectFill" class="icon"></image>
				<text>设备信息</text>
			</view>
			<view class="right">
				<image src="../../../static/images/icon26.png" class="scan" mode="aspectFill" @click="scanClick"></image>
			</view>
		</view>
		<view class="box">
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">设备编号</text>
				<view class="flex align-center con">
					<input placeholder="请选择" class="ipt" disabled v-model="form.emCode"/>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" @click="navTo('/pages/service/select-device/index')"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">设备名称</text>
				<view class="flex align-center con">
					<input placeholder="名称" class="ipt" :disabled="form.emId === 0 ? false : true" v-model="form.emName"/>
					<view class="arrow-r"></view>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">型号</text>
				<view class="flex align-center con">
					<input placeholder="型号" class="ipt" disabled v-model="form.emSpecification"/>
					<view class="arrow-r"></view>
				</view>
			</view>
			<!-- <view class="item flex align-center justify-between border-b-f7">
				<text class="label">设备区域</text>
				<view class="flex align-center con">
					<text @click="toggleTab('linkage')" v-if="areaValue">{{areaValue}}</text>
					<text @click="toggleTab('linkage')" v-else class="color-gray">请选择</text>
					<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
				</view>
			</view> -->
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">详细位置</text>
				<view class="flex align-center con">
					<input placeholder="请输入" class="ipt" v-model="form.emLocation"/>
					<view class="arrow-r"></view>
				</view>
			</view>
		</view>
		<view class="flex align-center justify-between title">
			<view class="flex align-center">
				<image src="../../../static/images/icon25.png" mode="aspectFill" class="icon"></image>
				<text>故障信息</text>
			</view>
		</view>
		<view class="box">
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">紧急程度</text>
				<view class="flex align-center con" @click="toggleTab('selector')">
					<text v-if="leverValue">{{leverValue}}</text>
					<text v-else class="color-gray">请选择</text>
					<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">故障现象</text>
				<view class="flex align-center con" @click="toggleTab('type')">
					<text v-if="typeValue">{{typeValue}}</text>
					<text v-else class="color-gray">请选择</text>
					<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label">设备状态</text>
				<view class="flex align-center con" @click="toggleTab('state')">
					<text v-if="stateValue">{{stateValue}}</text>
					<text v-else class="color-gray">请选择</text>
					<image src="../../../static/images/arrow-r.png" class="arrow-r"></image>
				</view>
			</view>
		</view>
		<view class="box padding-tb-32 margin-t-24">
			<view class="padding-b-24">故障描述:</view>
			<textarea  class="text-h-44 tar-ipt" placeholder="请输入" v-model="form.repDesc"></textarea>
		</view>
		
		
		<view class="box margin-t-48">
			<view class="item flex align-center justify-between border-b-f7">
				<text class="label flex-shrink">音频</text>
				<view class="con">
					<view class="flex align-center over-hidden padding-tb-12" @click="playAudio(item, index)" v-for="(item, index) in audioList" :key="index">
						<image src="../../../static/images/play.png" mode="aspectFill" class="play" v-if="!item.isPlay"></image>
						<image src="../../../static/images/stop.png" mode="aspectFill" class="play" v-else></image>
						<view class="audio text-ellipsis">{{item.url}}</view>
						<image src="../../../static/images/delete.png" class="del-icon margin-l-24" mode="widthFix" @click.stop="delAudio(index)"></image>
					</view>
				</view>
				<view class="flex-shrink padding-lr-24"  @longtap="longpressBtn" @touchmove="handleTouchMove" @touchstart="longpressBtn" @touchend="touchendBtn()" @click="touchAudioBtn()" v-if="audioList.length < 9">
					<image src="../../../static/images/icon27.png" mode="widthFix" class="a-icon"></image>
				</view>
			</view>
			<!-- <view class="textarea-box">
				<view>
					<image class="play-icon" @click="playAudio(1)" v-if="!isPlayAudio"
						src="../../../static/images/play.png"></image>
					<image class="play-icon" @click="playAudio(2)" v-else
						src="../../../static/images/play.png">
					</image>
				</view>
				<view class="">
					<view :class="'prompt-loader'">
						<view :class="isPlayAudio?'em':'pause em'" v-for="(item,index) in 15" :key="index">
						</view>
					</view>
				</view>
				<view>
					<image class="cu-tag" src="../../../static/images/close.png" mode="aspectFill"
						@tap.stop="delAudio">
					</image>
				</view>
			</view> -->
			<view :class="longPress == '1' ? 'record-layer' : 'record-layer1'" @click="longPress = 1">
				<view :class="longPress == '1' ? 'record-box' : 'record-box1'">
					<view class="record-btn-layer">
						<button class="record-btn" :class="longPress == '1' ? '' : 'record-btn-2'"
							:style="VoiceTitle != '松开手指,取消发送' && longPress != '1'?'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);':'background-color: rgba(0, 0, 0, 0);color:white'">
							<image src="../../../static/images/icon30.png" mode=""></image>
							<text>{{VoiceText}}</text>
						</button>
					</view>
					<!-- 语音音阶动画 -->
					<view
						:class="VoiceTitle != '松开手指,取消发送'?'prompt-layer prompt-layer-1':'prompt-layer1 prompt-layer-1'"
						v-if="longPress == '2'">
						<view class="prompt-loader">
							<view class="em" v-for="(item,index) in 15" :key="index"></view>
						</view>
						<text class="span">{{VoiceTitle}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="item flex border-b-f7">
				<text class="label flex-shrink margin-r-12">图片</text>
				<view class="flex align-center flex-1 flex-wrap">
					<view class="img-box" v-for="(item, index) in imgList" :key="index">
						<image :src="item" mode="aspectFit" class="img" @click="previewImg(item)"></image>
						<image src="../../../static/images/close.png" class="close" @click.stop="delImg(index, 'img')"></image>
					</view>
				</view>
				<view class="flex-shrink padding-lr-24" v-if="imgList.length < 9">
					<image src="../../../static/images/icon28.png" mode="widthFix" class="i-icon" @click="uploadImg('img')"></image>
				</view>
			</view>
			<view class="item flex justify-between">
				<text class="label flex-shrink margin-r-12">视频</text>
				<view class="flex flex-1 flex-wrap align-center">
					<block v-for="(item, index) in videoList" :key="index">
						<view class="img-box" v-if="!item.isPlay" @click.stop="playVideo(item, index)">
							<image src="" mode="aspectFill" lazy-load class="img" style="background-color: #000;width: 100%;"></image>
							<image src="../../../static/images/video-bg.png" mode="aspectFill" class="v-play"></image>
							<image src="../../../static/images/close.png" class="close" @click.stop="delImg(index, 'video')"></image>
						</view>
						<view class="img-box" v-else>
							<video :src="item.url" class="img" :id="`myVideo${index}`" @fullscreenchange="fullscreenchange($event, index)" @ended="videoEnd($event, index)"></video>
						</view>
					</block>
				</view>
				<view class="flex-shrink padding-lr-24" v-if="videoList.length < 9">
					<image src="../../../static/images/icon29.png" mode="widthFix" class="i-icon" @click="uploadImg('video')"></image>
				</view>
			</view>
		</view>
		<view class="bottom-wrap">
			<view class="bottom">
				<view class="btn" @click="submit">立即上报</view>
			</view>
		</view>
		
		<!-- 选择区域 -->
		<w-picker mode="linkage" :options="areaList" themeColor="#30a3e0" :defaultProps="defaultProps" default-type="name" @confirm="onConfirm($event, 'linkage')" ref="linkage"></w-picker>
		<!-- 选择紧急程度 -->
		<w-picker mode="selector" :options="leverList" themeColor="#30a3e0" :defaultProps="leverProps" default-type="dictName" @confirm="onConfirm($event, 'selector')" ref="selector" :value="leverValue"></w-picker>
		<!-- 选择故障类别 -->
		<w-picker mode="selector" :options="typeList" themeColor="#30a3e0" :defaultProps="leverProps" default-type="dictName" @confirm="onConfirm($event, 'type')" ref="type"></w-picker>
		<!-- 选择设备状态 -->
		<w-picker mode="selector" :options="stateList" themeColor="#30a3e0" :defaultProps="leverProps" default-type="dictName" @confirm="onConfirm($event, 'state')" ref="state"></w-picker>
	</view>
</template>

<script>
import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
import wPicker from '@/components/w-picker/w-picker.vue';
import UploadImage from '@/common/utils/upload-image.js';
import {UPLOAD_IMAGE_URL, READ_FILE_URL} from '@/common/config.js';
import permission from "@/common/utils/authPermiss.js";
import { uploadFile } from '@/common/api/uploadApi.js';
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;

export default {
	components: {
		fuNavbar,
		wPicker,
	},
	data() {
		return {
			areaList: [],
			defaultProps: {
				value: 'id',
				label: 'name',
				children: 'children'
			},
			areaValue: '',
			leverProps: {
				value: 'dictValue',
				label: 'dictName'
			},
			leverList: [],
			leverValue: '',
			imgList: [],
			typeList: [],
			typeValue: '',
			stateList: [],
			stateValue: '',
			emCode: '',
			emId: '',
			isTouchEnd: false,
			isPlayAudio: false,
			isOpenDialog: false,
			startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
			longPress: '1', // 1显示 按住 说话 2显示 说话中
			delShow: false, // 删除提示框显示隐藏
			time: 0, //录音时长
			duration: 60000, //录音最大值ms 60000/1分钟
			tempFilePath: '', //音频路径
			startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
			sendLock: true, //发送锁，当为true时上锁，false时解锁发送
			VoiceTitle: '松手结束录音',
			VoiceText: '按住 说话',
			audio: '',
			isPlay: false,
			videoContext: null,
			videoList: [],
			audioList: [],
			imgCodes: [],
			audioCodes: [],
			videoCodes: [],
			form: {
				emId: '',
				emName: '', //设备名称
				emSpecification: '', //设备型号
				// emArea: '', //设备区域
				// emBlock: '', //设备区块
				urgencyLevel: '', //紧急程度
				repFaultType: '', //故障类别
				repEmState: '', //设备状态
				emStateDesc: '', //设备状态描述
				repDesc: '', //故障描述
				fileAudioCode: '', //音频编码
				filePicCode: '', //图片编码
				fileVideoCode: '', //视频编码
				emLocation: '', //详细位置
				emCode: '',
				sourceId: '', //来源id
				sourceType: '', //来源类型
				sourceCode: '', //来源工单号
			},
			videoSrc: '',
			repId: 0,
			pageType: '',
			leverValue: null,
		}
	},
	onLoad(option) {
		if (option.info) {
			let info = JSON.parse(option.info)
			this.form.sourceType = option.sourceType
			this.form.emId = 0
			this.form.emName = info.emName
			this.form.emSpecification = info.emSpecification
			this.form.emCode = info.emCode
			this.form.emLocation = info.emLocation
			// this.areaValue = info.emArea + info.emBlock
			this.form.sourceId = info.upkeepId
			this.form.sourceCode = info.workOrderCode
		}
		this.repId = option.id
		if (option.type) {
			let that = this
			this.pageType = option.type
			this.form.sourceCode = option.code
			// this.getEquipInfo(this.repId)
			that.form.repDesc = option.desc
			if (option.imgs) {
				let imgs = JSON.parse(option.imgs)
				let arr = []
				imgs.forEach((item) => {
					arr.push(`${READ_FILE_URL}${item.fileCode}`)
					that.imgCodes.push(item.fileCode)
				})
				this.imgList = arr
			}
			if (option.videos) {
				let videos = JSON.parse(option.videos)
				let arr = []
				videos.forEach((item) => {
					arr.push(`${READ_FILE_URL}${item.fileCode}`)
					that.videoCodes.push(item.fileCode)
				})
				this.videoList = arr
			}
			if (option.audios) {
				let audios = JSON.parse(option.audios)
				let arr = []
				audios.forEach((item) => {
					arr.push(`${READ_FILE_URL}${item.fileCode}`)
					that.audioCodes.push(item.fileCode)
				})
				this.audioList = arr
			}
		}
		if (option.fromPage&&option.fromPage == 'scanCode') {
			this.getEquipInfo(option.id)
		}
		// this.getArea();
		this.getType();
		this.getFault();
		this.getState();
		uni.$on('getDevice', data => {
			console.log(data)
			this.form.emId = data.id
			this.form.emCode = data.emCode
			this.form.emName = data.emName
			this.form.emSpecification = data.emSpecification
			// this.areaValue = data.emArea + data.emBlock
			this.form.emLocation = data.emLocation
		})
		uni.$on('scanTap', id => {
			this.getEquipInfo(id)
		})
		
	},
	onReady() {
		// this.videoContext = uni.createVideoContext('myVideo');
	},
	onUnload() {
		uni.$off('getDevice')
		uni.$off('scanTap')
	},
	methods: {
		navTo(path) {
			uni.navigateTo({
				url:path
			})
		},
		toggleTab(ref) {
			if (ref == 'linkage') {
				if (this.form.emId) return
			}
		  this.$refs[ref].show();
		},
		// 获取设备位置
		getArea() {
			this.$api.post(global.apiUrls.selectEquipmentLocationLink).then(res => {
				if (res.data.code == 9100) {
					this.areaList = res.data.info
					if (this.pageType == 'scan') {
						this.getEquipInfo(this.repId)
					}
					// if (this.form.sourceType) {
					// 	let arr = []
					// 	this.areaList.forEach(item => {
					// 		if (this.form.emArea == item.id) {
					// 			arr.push(item.name)
					// 			item.children.forEach(child => {
					// 				if (this.form.emBlock == child.id) {
					// 					arr.push(child.name)
					// 				}
					// 			})
					// 		}
					// 	})
					// 	this.areaValue = arr[0] + arr[1]
					// }
				}
			})
		},
		onConfirm(e, type) {
			console.log(e)
			if (type == 'linkage') {
				this.linkValue = []
				this.areaValue = e.result
				this.form.emArea = e.value[0]
				this.form.emBlock = e.value[1]
			} else if (type == 'selector') {
				this.leverValue = e.result
				this.form.urgencyLevel = e.value
			} else if (type == 'type') {
				this.typeValue = e.result
				this.form.repFaultType = e.value
			} else if (type == 'state') {
				this.stateValue = e.result
				this.form.repEmState = e.value
			}
		},
		// 查询紧急程度
		getType() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_URGENCY_LEVEL'
			}).then(res => {
				if (res.data.code == 9100) {
					this.leverList = res.data.info
				}
			})
		},
		// 查询故障类别
		getFault() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_REP_FAULT'
			}).then(res => {
				if (res.data.code == 9100) {
					this.typeList = res.data.info
				}
			})
		},
		// 查询设备状态
		getState() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_EM_STATE'
			}).then(res => {
				if (res.data.code == 9100) {
					this.stateList = res.data.info
				}
			})
		},
		previewImg(item) {
			uni.previewImage({
				urls: [item]
			})
		},
		delImg(i, type) {
			if (type == 'img') {
				this.imgList.splice(i, 1)
				this.imgCodes.splice(i, 1)
			} else if (type == 'video') {
				this.videoList.splice(i, 1)
				this.videoCodes.splice(i, 1)
			}
		},
		// 上传图片/视频
		uploadImg(type) {
			if (type == 'img') {
				uni.chooseImage({
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						new UploadImage(tempFilePaths, {
							complete: (item) => {
								item.forEach(data => {
									this.imgCodes.push(data)
									let path = `${READ_FILE_URL}${data}`
									this.imgList.push(path)
								})
							}
						})
					}
				})
			} else if (type == 'video') {
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					success: res => {
						uni.showLoading({
							title: '上传中...'
						});
						let videoFile = res.tempFilePath;
						let size = Math.ceil(res.size/1024/1024);
						if(size > 50 ) {
							uni.hideLoading();
							uni.showToast({
								title: '视频大小不能超过50M',
								icon: 'none'
							})
							return
						}
						this.uploadVideo(res)
					}
				})
			}
		},
		getEquipInfo(id) {
			this.$api.post(global.apiUrls.selectEquipmentInfo, {
				id: id
			}).then(data => {
				if (data.data.code == 9100) {
					let info = data.data.info
					console.log(info, 'info')
					this.form.emId = info.id
					this.form.emCode = info.emCode
					this.form.emName = info.emName
					this.form.emSpecification = info.emSpecification
					// this.form.emArea = info.emAreaId
					// this.form.emBlock = info.emBlockId
					this.form.repEmState = info.emState
					this.form.emLocation = info.emLocation
					// this.areaValue = `${info.emArea} ${info.emBlock}`
				} else {
					uni.showToast({
						title: data.data.msg,
						icon: 'none'
					})
				}
			})
		},
		scanClick() {
			// uni.scanCode({
			// 	success: res => {
			// 		console.log(res, 'scan')
			// 		if (res.result.startsWith('EAM_EM')) {
			// 			let id = res.result.split('_')[2]
			// 			this.getEquipInfo(id)
			// 		}
			// 	}
			// })
			uni.navigateTo({
				url: `/pages/service/scanCode/index?type=rep`
			})
		},
		// 检测麦克风权限
		async checkRecord(e) {
		  try {
		    let checkResult = await permission("record");
		    console.log("检测信息：", checkResult);
		    if (checkResult.code == 1) {
		      let result = checkResult.data;
		      if (result == 1) {
		        console.log("授权成功!");
				let that = this
				if (this.isTouchEnd) return
				console.log(recorderManager)
				recorderManager.onStop((res) => {
					console.log(777);
					console.log(res);
					// that.userInfo.remark = res.tempFilePath;
				})
				console.log(555, recorderManager);
				that.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				that.longPress = '2';
				that.VoiceText = '说话中...';
				const options = {
					// duration: that.duration, // 指定录音的时长，单位 ms
					// sampleRate: 16000, // 采样率
					numberOfChannels: 1, // 录音通道数
					// encodeBitRate: 96000, // 编码码率
					format: 'mp3', // 音频格式，有效值 aac/mp3
					frameSize: 10, // 指定帧大小，单位 KB
				}
				recorderManager.start(options);
				// 监听音频开始事件
				that.sendLock = false; //长按时是不上锁的。
				recorderManager.onStart((res) => {
					console.log(1111222)
				})
				// 	},
				// 	fail: (res) => {
				// 		uni.showToast({
				// 			title: '喊话失败',
				// 			icon: 'none'
				// 		})
				// 	}
				// })
		      }
		      if (result == 0) {
		        console.log("授权已拒绝!");
				uni.showToast({
					title: '麦克风权限未开启',
					icon: 'none'
				})
		      }
		      if (result == -1) {
		        console.log("您已永久拒绝麦克风权限，请在应用设置中手动打开!");
				uni.showToast({
					title: '您已永久拒绝麦克风权限，请在应用设置中手动打开!',
					icon: 'none'
				})
		      }
		    }
		  } catch (err) {
		    console.log("授权失败：", err);
		  }
		},
		// 语音开始
		longpressBtn(e) {
			this.isTouchEnd = false
			this.checkRecord(e);
		},
		// 删除录音
		handleTouchMove(e) {
			//touchmove时触发
			var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
			if (Math.abs(moveLenght) > 70) {
				// wx.showToast({
				//       title: "松开手指,取消发送",
				//       icon: "none",
				//       duration: 60000
				// });
				// console.log("松开手指,取消发送");
				this.VoiceTitle = "松开手指,取消发送";
				this.VoiceText = '松开手指,取消发送';
				this.delBtn()
				this.sendLock = true; //触发了上滑取消发送，上锁
			} else {
				// wx.showToast({
				//       title: "正在录音，上划取消发送",
				//       icon: "none",
				//       duration: 60000
				// });
				this.VoiceTitle = "松手结束录音";
				this.VoiceText = '松手结束录音';
				this.sendLock = false; //上划距离不足，依然可以发送，不上锁
			}
		},
		// 长按松开录音事件
		touchendBtn() {
			console.log('end', recorderManager)
			this.isTouchEnd = true
			this.longPress = '1';
			this.VoiceText = '按住 说话';
			this.VoiceTitle = '松手结束录音'
			recorderManager.onStop((res) => {
				console.log(this.sendLock);
				if (this.sendLock) {
					//上锁不发送
				} else { //解锁发送，发送网络请求
					if (res.duration < 1000)
						uni.showToast({
							title: "录音时间太短",
							icon: "none",
							duration: 1000
						});
					else {
						// this.userInfo.remark = res.tempFilePath
						console.log('end', res)
						let that = this
						uni.showLoading({
							mask: true,
							title: '上传中...'
						})
						uni.uploadFile({
							url: UPLOAD_IMAGE_URL,
							filePath: res.tempFilePath,
							fileType: 'audio',
							name: 'files',
							header: {
								'Authorization': global.token
							},
							// formData: {
							// 	'files': res.tempFilePath,
							// },
							success: (child) => {
								console.log(child)
								let data = JSON.parse(child.data);
								if (data.code == 9100) {
									// this.audio = data.info[0]
									const now = new Date();
									const year = now.getFullYear();
									const MM = `0${now.getMonth() + 1}`
									const month = MM.slice(-2)
									const dd = `0${now.getDate()}`
									const day = dd.slice(-2)
									const hh = `0${now.getHours()}`.slice(-2)
									const mm = `0${now.getMinutes()}`.slice(-2)
									const ss = `0${now.getSeconds()}`.slice(-2)
									let time = year + month + day + hh + mm + ss
									let path = `${READ_FILE_URL}${data.info[0]}`
									let obj = {
										url: time,
										src: path,
										isPlay: false
									}
									this.audioList.push(obj)
									// innerAudioContext.src = path
									this.audioCodes.push(data.info[0])
								} else {}
							},
							complete: () => {
								uni.hideLoading()
							},
						});
					}
				}
			})
		
			// this.recordingTimer(this.time)
			recorderManager.stop(); //结束录音
		},
		touchAudioBtn() {
			
		},
		delAudio(i) {
			this.audioList.splice(i, 1)
			this.audioCodes.splice(i, 1)
		},
		delBtn() {
			this.delShow = false;
			this.time = 0
			// this.VoiceTitle = '松手结束录音'
		},
		playAudio(item, i) {
			// this.isPlayAudio = !this.isPlayAudio
			this.audioList[i].isPlay = !this.audioList[i].isPlay
			innerAudioContext.src = item.src
			if (this.audioList[i].isPlay) {
				this.audioList.forEach((res, index) => {
					if (index !== i) {
						res.isPlay = false
					}
				})
				innerAudioContext.play();
			} else {
				this.audioList.forEach((res, index) => {
					res.isPlay = false
				})
				innerAudioContext.pause()
			}
			innerAudioContext.onEnded(() => {
				this.audioList[i].isPlay = false
			})
			// console.log(this.isPlayAudio,2)
		},
		
		// 播放视频
		playVideo(e, i) {
		  // this.isPlay = true;
		  this.videoContext = uni.createVideoContext(`myVideo${i}`);
		  this.videoList[i].isPlay = true
		  let that = this;
		  console.log(e, 1212)
		  setTimeout(() => {
		    that.videoContext.requestFullScreen(0);
		    that.videoContext.play();
		  }, 200);
		},
		fullscreenchange(e, i) {
			console.log(e);
			// 退出全屏时
			if (!e.detail.fullScreen) {
				this.videoList[i].isPlay = false
				this.videoContext.pause();
			}
		},
		videoEnd(e, i) {
			this.videoContext.exitFullScreen();
			this.videoList[i].isPlay = false
		},
		// 上传视频
		uploadVideo(file) {
			console.log(file, 1111)
			let _this = this
			// const formData = new FormData()
			// formData.append('files', file.tempFile)
			// uploadFile(formData).then(res => {
			// 	if (res.code == 9100) {
			// 		uni.hideLoading();
			// 		let info = res.info
			// 		info.forEach(item => {
			// 			this.videoCodes.push(item)
			// 			let path = `${READ_FILE_URL}${item}`
			// 			let obj = {
			// 				url: path,
			// 				isPlay: false
			// 			}
			// 			this.videoList.push(obj)
			// 		})
			// 		console.log(this.videoList)
			// 	} else {
			// 	  uni.hideLoading();
			// 	  uni.showToast({
			// 		title: '上传失败，请重试',
			// 		icon: 'none'
			// 	  })
			// 	}
			// }).catch(err => {
			// 	setTimeout(function () {
			// 		uni.hideLoading();
			// 	}, 1000);
			// })
			
			uni.uploadFile({
				url: UPLOAD_IMAGE_URL,
				files: [{
					name: 'files',
					file: file.tempFile,
					uri: file.tempFilePath
				}],
				fileType: 'video',
				header: {
				  'Authorization': global.token || ''
				  // "Content-Type": "multipart/form-data"
				},
				success: res => {
					console.log(res, 'resres')
					let data = JSON.parse(res.data)
					if (data.code == 9100) {
						uni.hideLoading();
						// let fileData = {}
						let info = data.info
						info.forEach(item => {
							this.videoCodes.push(item)
							let path = `${READ_FILE_URL}${item}`
							let obj = {
								url: path,
								isPlay: false
							}
							this.videoList.push(obj)
						})
					} else {
					  uni.hideLoading();
					  uni.showToast({
					  	title: '上传失败，请重试',
						icon: 'none'
					  })
					}
				},
				complete: () => {
				  setTimeout(function () {
					  uni.hideLoading();
				  }, 1000);
				}
			})
		},
		submit() {
			if (this.form.emId === '' && !this.form.emCode) {
				uni.showToast({
					title: '请选择设备',
					icon: 'none'
				})
				return;
			}
			if (this.form.emId === '' && !this.form.emName) {
				uni.showToast({
					title: '请选择设备',
					icon: 'none'
				})
				return;
			}
			if (this.form.emCode === '' &&!this.form.emSpecification) {
				uni.showToast({
					title: '请选择设备',
					icon: 'none'
				})
				return;
			}
			if (!this.form.emLocation) {
				uni.showToast({
					title: '请填写详细位置',
					icon: 'none'
				})
				return;
			}
			if (!this.form.urgencyLevel) {
				uni.showToast({
					title: '请选择紧急程度',
					icon: 'none'
				})
				return;
			}
			if (!this.form.repFaultType) {
				uni.showToast({
					title: '请选择故障类别',
					icon: 'none'
				})
				return;
			}
			if (!this.form.repEmState) {
				uni.showToast({
					title: '请选择设备状态',
					icon: 'none'
				})
				return;
			}
			this.form.fileAudioCode = this.audioCodes.join(',')
			this.form.filePicCode = this.imgCodes.join(',')
			this.form.fileVideoCode = this.videoCodes.join(',')
			this.$api.post(global.apiUrls.insertRepair, this.form).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '上报成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({
						title:res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		sparePartsApi(){
			let arr = []
			this.partList.forEach(item => {
				let obj = {
					partId: item.id,
					num: item.num
				}
				arr.push(obj)
			})
			this.$api.post(global.apiUrls.insertPartApply, {
				outType: this.outType,
				applyDesc: this.applyDesc,
				data: JSON.stringify(arr),
				businessCode: this.businessCode,
				businessId: this.businessId
			}).then(res => {
				console.log(res)
				if (res.data.code == 9100) {
					let id = res.data.info
					this.updateApply(id)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},
		updateApply(id) {
			this.$api.post(global.apiUrls.updatePartApplyState, {
				id: id,
				operation: 1
			}).then(res => {
				if (res.data.code == 9100) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>


<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.title {
	padding: 16rpx 24rpx;
	.icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 24rpx;
	}
	text {
		font-weight: bold;
		font-size: 28rpx;
	}
	.scan {
		width: 56rpx;
		height: 56rpx;
	}
}
.box {
	background-color: #fff;
	padding: 0 24rpx;
	font-size: 28rpx;
	.tar-ipt {
		height: 180rpx;
		font-size: 28rpx;
	}
	.item {
		padding: 32rpx 0;
		.con {
			justify-content: right;
		}
		.ipt {
			text-align: right;
			font-size: 28rpx;
		}
		.arrow-r {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}
		.play {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
			margin-right: 12rpx;
		}
		.audio {
			color: #6c8bb6;
			text-decoration: underline;
		}
		.img-box {
			width: 32%;
			height: 100rpx;
			margin-right: 1.3%;
			position: relative;
			&:nth-of-type(3n) {
				margin-right: 0;
			}
			margin-bottom: 12rpx;
			.v-play {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			.img {
				width: 100%;
				height: 100%;
			}
			.close {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				z-index: 9;
				top: -8rpx;
				right: -8rpx;
			}
		}
		.a-icon {
			width: 68rpx;
		}
		.i-icon {
			width: 80rpx;
		}
	}
}
.bottom-wrap {
	height: 160rpx;
	.bottom {
		background-color: #fff;
		padding: 16rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 9;
		.btn {
			width: 100%;
			height: 108rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 108rpx;
			color: #fff;
			background-color: #0f68f0;
		}
	}
}

.textarea-box {
	border-radius: 16rpx;
	margin-top: 20rpx;
	background: rgba(14, 203, 127, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 58rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	font-size: 0;

	// .u-textarea {
	// 	background-color: #F7F7F7 !important;
	// }
	.play-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.cu-tag {
		width: 30rpx;
		height: 30rpx;
		// position:;		
	}
}
.del-icon {
	width: 32rpx;
}
.record-layer {
	display: none;
	// width: 91vw;
	// // padding: 300px 0;
	// box-sizing: border-box;
	// height: 15vw;
	// position: fixed;
	// margin-left: 4vw;
	// left:0;
	// z-index: 101;
	// bottom: 3vh;
}

.record-layer1 {
	width: 100vw;
	// padding: 300px 0;
	box-sizing: border-box;
	height: 100vh;
	position: fixed;
	background-color: rgba(0, 0, 0, .6);
	z-index: 101;
	bottom: 0vh;
	left: 0;
	display: flex;
	align-items: flex-end;
}
.record-box {
	width: 100%;
	position: relative;
}

.record-box1 {
	width: 100%;
	position: relative;
	// bottom: -83vh;
	height: 17vh;
}
.record-btn-layer {
		width: 100%;
	}

	.record-btn-layer button::after {
		border: none;
		transition: all 0.1s;
	}

	.record-btn-layer button {
		font-size: 14px;
		line-height: 50px;
		width: 100%;
		height: 50px;
		border-radius: 8px;
		text-align: center;
		background: #FFD300;
		transition: all 0.1s;
	}

	.record-btn-layer button image {
		width: 16px;
		height: 16px;
		margin-right: 4px;
		vertical-align: middle;
		transition: all 0.3s;
	}

	.record-btn-layer .record-btn-1 {
		background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
		color: #000000 !important;

	}

	.record-btn-layer .record-btn-2 {
		border-radius: 168rpx 168rpx 0 0;
		height: 17vh;
		line-height: 17vh;
		transition: all 0.3s;
	}
	/* 提示小弹窗 */
	.prompt-layer {
		border-radius: 15px;
		background: #95EB6C;
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	.prompt-layer::after {
		content: '';
		display: block;
		border: 12px solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #95EB6C;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	//取消动画
	.prompt-layer1 {
		border-radius: 15px;
		background: #FB5353;
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	.prompt-layer1::after {
		content: '';
		display: block;
		border: 12px solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #FB5353;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}
	
	.prompt-layer-1 {
		font-size: 12px;
		width: 150px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -400rpx;
	}
	
	.prompt-layer-1 .p {
		color: #000000;
	}
	
	.prompt-layer-1 .span {
		color: rgba(0, 0, 0, .6);
	}
	
	.prompt-loader .em {}
	
	/* 语音音阶------------- */
	.prompt-loader {
		width: 110px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 6px;
	}
	
	.prompt-loader .em {
		display: block;
		background: #0FBA75;
		width: 2px;
		height: 10%;
		margin-right: 2.5px;
		float: left;
	}
	
	.prompt-loader .em:last-child {
		margin-right: 0px;
	}
	
	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}
	
	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}
	
	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}
	
	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}
	
	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}
	
	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}
	
	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}
	
	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}
	
	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}
	
	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}
	
	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}
	
	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}
	@keyframes load {
		0% {
			height: 10%;
		}
	
		50% {
			height: 100%;
		}
	
		100% {
			height: 10%;
		}
	}
	
	.prompt-loader .em.pause {
		animation-play-state: paused;
	}
	
	/* 语音音阶-------------------- */
	.prompt-layer-2 {
		top: -40px;
	}
	
	.prompt-layer-2 .text {
		color: rgba(0, 0, 0, 1);
		font-size: 12px;
	}

.text-h-44 {
	line-height: 44rpx;
}
.color-gray {
	color: gray;
}
</style>